<template>
	<view>
		<!-- 选项卡 - 2 -->
		<view class="YouRan-UI-XuanXiangKa-2 Flex Bj-BeiJingSe">
			<view class="XunHuan Flex" @click="DianJi_QieHuan_Tab(1)">
				<text :class="Tab==1?'Zi H2 H2-Line':'Zi H2 H2-Line Zt-ZhanWeiSe'">未读</text>
				<text
					v-if="LieBiao_WeiDu_Shu"
					class="Shu Bj-HongSe">{{LieBiao_WeiDu_Shu}}</text>
			</view>
			<view class="XunHuan Flex" @click="DianJi_QieHuan_Tab(2)">
				<text :class="Tab==2?'Zi H2 H2-Line':'Zi H2 H2-Line Zt-ZhanWeiSe'">已读</text>
				<text
					v-if="LieBiao_YiDu_Shu"
					class="Shu Bj-HongSe">{{LieBiao_YiDu_Shu}}</text>
			</view>
		</view>
		<!-- 未读列表 -->
		<view class="TAB-1" v-if="Tab == 1">
			<view class="YouRan-UI-LieBiao-3">
				<template v-if="LieBiao_WeiDu_ZhuangTai=='YouShuJu'">
					<view
						@click="DianJi_GengXin_WeiDu_ZhuangTai(item.id,item.actionObject,item.actionInfo)"
						v-for="item in LieBiao_WeiDu"
						class="XunHuan Flex">
						<view class="Zuo">
							<image :src="item.actionUser.avatar" mode="widthFix"></image>
						</view>
						<view class="You">
							<view class="NiCheng Zt-ShenLanSe">{{item.actionUser.nickname}}<text class="P">[{{LieBiao_LeiXing}}]</text></view>
							<view class="PingLun Bj-BeiJingSe">
								<view class="_XunHuan Flex H3 SanHang">
									<text class="_NiCheng Zt-ShenLanSe">原帖:</text>
									<text>{{item.actionInfo.title?item.actionInfo.title:$_GuoLv_HTML(item.actionInfo.content)}}</text>
								</view>
							</view>
						</view>
					</view>
					<view
						@click="QingQiu_WeiDu('FanYe')"
						class="H3 H3-Line Bj-BeiJingSe Zt-ZhanWeiSe Flex"
						style="padding: 35rpx 0;text-align: center;margin: 25rpx;justify-content: center;border-radius: 100rpx;">点击加载更多</view>
					<view
						@click="DianJi_QuanBu_YiDu"
						class="YouRan-UI-AnNiu-1 Bj-HongSe Flex">全部已读</view>
				</template>
				<template v-if="LieBiao_WeiDu_ZhuangTai=='JiaZaiZhong'">
					<YouRan-UI-JiaZaiZhong LeiXing="JuBu"></YouRan-UI-JiaZaiZhong>
				</template>
				<template v-if="LieBiao_WeiDu_ZhuangTai=='WuShuJu'">
					<view class="YouRan-UI-WuShuJu-1 Flex" style="padding: 50rpx 0;">
						<text class="iconfont icon-cry Zt-ZhanWeiSe"></text>
						<view class="Zt-ZhanWeiSe">暂无任何数据</view>
					</view>
				</template>
			</view>
		</view>
		<!-- 已读列表 -->
		<view class="TAB-2" v-if="Tab == 2">
			<view class="YouRan-UI-LieBiao-3">
				<template v-if="LieBiao_YiDu_ZhuangTai=='YouShuJu'">
					<view
						@click="DianJi_YiDu_LieBiao(item.id,item.actionObject,item.actionInfo)"
						v-for="item in LieBiao_YiDu"
						class="XunHuan Flex">
						<view class="Zuo">
							<image :src="item.actionUser.avatar" mode="widthFix"></image>
						</view>
						<view class="You">
							<view class="NiCheng Zt-ShenLanSe">{{item.actionUser.nickname}}<text class="P">[{{LieBiao_LeiXing}}]</text></view>
							<view class="PingLun Bj-BeiJingSe">
								<view class="_XunHuan Flex H3 SanHang">
									<text class="_NiCheng Zt-ShenLanSe">原帖:</text>
									<text>
										{{$_GuoLv_HTML(item.content)}}
									</text>
								</view>
							</view>
						</view>
					</view>
					<view
						@click="QingQiu_YiDu('FanYe')"
						class="H3 H3-Line Bj-BeiJingSe Zt-ZhanWeiSe Flex"
						style="padding: 35rpx 0;text-align: center;margin: 25rpx;justify-content: center;border-radius: 100rpx;">点击加载更多</view>
					<view
						@click="DianJi_ShanChu_QuanBu_YiDu"
						class="YouRan-UI-AnNiu-1 Bj-HongSe Flex">删除全部</view>
				</template>
				<template v-if="LieBiao_YiDu_ZhuangTai=='JiaZaiZhong'">
					<YouRan-UI-JiaZaiZhong LeiXing="JuBu"></YouRan-UI-JiaZaiZhong>
				</template>
				<template v-if="LieBiao_YiDu_ZhuangTai=='WuShuJu'">
					<view class="YouRan-UI-WuShuJu-1 Flex" style="padding: 50rpx 0;">
						<text class="iconfont icon-cry Zt-ZhanWeiSe"></text>
						<view class="Zt-ZhanWeiSe">暂无任何数据</view>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Tab:1,
				LieBiao_WeiDu:[],
				LieBiao_WeiDu_ZhuangTai:"JiaZaiZhong",
				LieBiao_WeiDu_Shu:"",
				LieBiao_WeiDu_YeMa:2,
				LieBiao_YiDu:[],
				LieBiao_YiDu_ZhuangTai:"JiaZaiZhong",
				LieBiao_YiDu_Shu:"",
				LieBiao_YiDu_YeMa:2,
				LieBiao_LeiXing:""
			}
		},
		onShow() {
			this.QingQiu_WeiDu();
		},
		onLoad(e) {
			this.types = e.types;
			uni.setNavigationBarTitle({title:e.Title})
			this.LieBiao_LeiXing = e.Title;
		},
		methods: {
			// 请求，未读
			QingQiu_WeiDu(e){
				let FanYe = e;
				if(FanYe){uni.showLoading({ title: "加载中" });}
				this.$_QingQiu(
					"GET","/api/v2/notification/list",
					{
						"types":this.types,
						"status":0,
						"pageSize":15,
						"page":FanYe ? this.LieBiao_WeiDu_YeMa : ""
					},
					(res) => {
						this.QingQiu_YiDu();
						if(FanYe){
							uni.hideLoading();
							if(res.data.data.list.length){
								this.LieBiao_WeiDu = this.LieBiao_WeiDu.concat(res.data.data.list)
								this.LieBiao_WeiDu_YeMa++
							}else{
								uni.showToast({
									title: "没有数据啦",
									icon: "none",
									duration: 1000
								});
							}
						}else{
							this.LieBiao_WeiDu = res.data.data.list;
							this.LieBiao_WeiDu_Shu = res.data.data.paginate.total;
							if(this.LieBiao_WeiDu.length){
								this.LieBiao_WeiDu_ZhuangTai = "YouShuJu"
							}else{
								this.LieBiao_WeiDu_ZhuangTai = "WuShuJu"
							}
						}
					}
				)
			},
			// 请求，已读
			QingQiu_YiDu(e){
				let FanYe = e;
				if(FanYe){uni.showLoading({ title: "加载中" });}
				this.$_QingQiu(
					"GET","/api/v2/notification/list",
					{
						"types":this.types,
						"status":1,
						"pageSize":15,
						"page":FanYe ? this.LieBiao_YiDu_YeMa : ""
					},
					(res) => {
						if(FanYe){
							uni.hideLoading();
							if(res.data.data.list.length){
								this.LieBiao_YiDu = this.LieBiao_YiDu.concat(res.data.data.list)
								this.LieBiao_YiDu_YeMa++
							}else{
								uni.showToast({
									title: "没有数据啦",
									icon: "none",
									duration: 1000
								});
							}
						}else{
							this.LieBiao_YiDu = res.data.data.list;
							this.LieBiao_YiDu_Shu = res.data.data.paginate.total;
							if(this.LieBiao_YiDu.length){
								this.LieBiao_YiDu_ZhuangTai = "YouShuJu"
							}else{
								this.LieBiao_YiDu_ZhuangTai = "WuShuJu"
							}
						}
					}
				)
			},
			// 点击，切换卡，TAB
			DianJi_QieHuan_Tab(e){
				this.Tab = e;
			},
			// 点击，更新，未读，状态
			DianJi_GengXin_WeiDu_ZhuangTai(id,actionObject,actionInfo){
				this.$_QingQiu(
					"PUT","/api/v2/notification/mark-as-read",
					{
						"type":"choose",
						"notificationIds":id.toString()
					},
					(res) => {
						if(res.data.code == 0){
							if(actionObject == 4){
								this.$_TiaoZhuan('_XiangQing_TieZi/_XiangQing_TieZi?pid='+actionInfo.pid)
							}
							if(actionObject == 5){
								this.$_TiaoZhuan('_XiangQing_TieZi/_XiangQing_TieZi_PingLun?cid='+actionInfo.cid)
							}
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
					}
				)
			},
			// 点击，已读，列表
			DianJi_YiDu_LieBiao(id,actionObject,actionInfo){
				if(actionObject == 4){
					this.$_TiaoZhuan('_XiangQing_TieZi/_XiangQing_TieZi?pid='+actionInfo.pid)
				}
				if(actionObject == 5){
					this.$_TiaoZhuan('_XiangQing_TieZi/_XiangQing_TieZi_PingLun?cid='+actionInfo.cid)
				}
			},
			// 点击，全部，已读
			DianJi_QuanBu_YiDu(){
				uni.showModal({
					title: "注意",
					content: "是否全部已读？",
					success: (res) => {
						if(res.confirm) {
							uni.showLoading();
							this.$_QingQiu(
								"PUT","/api/v2/notification/mark-as-read",
								{
									"type":"all",
									"notificationType":this.types
								},
								(res_) => {
									uni.hideLoading();
									if(res_.data.code == 0){
										this.QingQiu_WeiDu();
									}else{
										uni.showToast({
											title:res_.data.message,
											icon:"none",
											duration:1000
										});
									}
								}
							)
						}
					}
				});
			},
			DianJi_ShanChu_QuanBu_YiDu(){
				uni.showModal({
					title: "注意",
					content: "是否删除全部已读？",
					success: (res) => {
						if(res.confirm) {
							uni.showLoading();
							this.$_QingQiu(
								"DELETE","/api/v2/notification/delete",
								{
									"type":"all",
									"notificationType":this.types
								},
								(res_) => {
									uni.hideLoading();
									if(res_.data.code == 0){
										this.QingQiu_WeiDu();
									}else{
										uni.showToast({
											title:res_.data.message,
											icon:"none",
											duration:1000
										});
									}
								}
							)
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
.YouRan-UI-LieBiao-3{
	.XunHuan{
		.You{
			.NiCheng{
				margin-bottom: 20rpx;
				.P{
					padding-left: 15rpx;
					font-weight: normal;
					color: $ShenLanSe;
				}
			}
		}
	}
}
.YouRan-UI-AnNiu-1{
	margin: 25rpx auto;
}
</style>
